<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="font-size: 20px;">
  <style>
    .box{
      color: red;
      /* 设置字体大小，浏览器默认字体大小16px,最小为12px */
      font-size: 1em;
      /* 设置字体 ，font-family的字体是使用用户计算机中所安装的字体*/
      /* font-family字体的后备机制，如果前面的字体不存在，那么会往后查找 */
      font-family:'华文行楷','楷体' ;
      /* 加粗 */
      font-weight: bold;
      font-weight: normal;/*取消加粗*/
      /* 字体倾斜 */
      font-style: italic;
      font-style: normal;/*取消倾斜*/
      /* 文本对齐方式 ，
                      left左对齐
                      center居中对齐
                      right右对齐
          注意:text-ailgn可以对文本、行块、行级元素应用。对块级元素的对齐不起作用
       */
      text-align: center;
      /* 
          文本修饰线
            text-decoration:
                           overline ：顶划线   
                           line-through:中划线
                           underline:下划线
                           none ：无
      */
      text-decoration: overline;
      text-decoration: line-through;
      text-decoration: underline;
      text-decoration: none;

      width: 200px;
      background-color: #ccc;
      /* 强制不换行 */
      white-space: nowrap;
      /* 溢出容器的部分隐藏 */
      overflow: hidden;
      /* 文本溢出隐藏 ,ellipsis表示...*/
      text-overflow: ellipsis;
      




      /* 
          文本缩进 ,单位支持px、em、rem
            1em=父元素的font-size
            1ren=html根元素的font-size
      */
      text-indent: 2em;
      font-size: 1rem;
    }
    html{
      font-size: 30px;
    }
  </style>
  <div class="box">内容内容内容内容内容内容内容内容</div>
  内容
  
  <!-- 
    line-height行高，在内容只有一行的情况下，将line-height的值设置为height的值
    可以将文本垂直居中
    line-height支持px，%百分比
      注意,行高的100%并不是参照高度，而是参照font-size,默认是16px的line-height
  -->

  <style>
    .line{
      line-height: 50px; 
      height: 50px;
      background-color:orange ;

    }
  </style>
  <div class="line" >
      line-height行高
  </div>

  <style>
    .space{
      /* 字符间距 */
      letter-spacing: 10px;
      /* 字符间距恢复正常 */
      letter-spacing: normal;
    }
  </style>
  <div class="space">字符间距</div>
</body>
</html>